import React, {
	Component
} from 'react';
import './App.css';
import {
	connect
} from "react-redux";

class App extends Component {
	constructor(props) {
		super(props);

	}

	render() {
		console.log(this.props.todos);
		return ( <
			div className = "App" >
			<
			div className = "todo_input_box_nr" >
			<
			input type = "text"
			ref = "todoInput" / >
			<
			button onClick = {
				() => {
					//获取输入框val
					var value = this.refs.todoInput.value;
					//非空
					if (value.length === 0) {
						alert("添加不能为空");
						return;
					}
					//组装todo对象
					var todo = {
						context: value,
						status: "PENDDING"
					}
					this.props.addTodo({
						type: "ADDTODO",
						todo: todo
					});
				}
			} > 添加 < /button> <
			/div> <
			div className = "todo_content_container" > {
				this.props.todos.map((element, index) => {
					return <div key = {
						index
					}
					className = "todo_item" >
						<
						div className = "todo_item_check" >
						<
						input type = "checkbox"
					checked = {
						element.status === "PENDDING" ? false : true
					}
					onChange = {
						(event) => {
							var checked = event.target.checked;
							this.props.changeTodoStatus({
								type: "CHANGESTATUS",
								todo: element,
								checked: checked
							})
						}
					}
					/> <
					/div> <
					div className = "todo_item_content" > {
							element.context
						} < /div> <
						div className = "todo_item_delete" >
						<
						button onClick = {
							() => {
								this.props.deleteTodo({
									type: "delete",
									todo: element
								})
							}
						} > 删除 < /button> <
						/div> <
						/div>
				})
			} <
			/div> <
			div className = "todo_tool_bar" >
			<
			div >
			<
			button onClick = {
				() => {
					this.props.all({
						type: "all"
					})
				}
			} > 全部 < /button> <
			/div> <
			div >
			<
			button onClick = {
				() => {
					this.props.showPendding({
						type: "pendding"
					})
				}
			} > 正在进行 < /button> <
			/div> <
			div >
			<
			button onClick = {
				() => {
					this.props.showFinished({
						type: "fininshed"
					})
				}
			} > 已完成 < /button> <
			/div> <
			div >
			<
			button > 全部删除 < /button> <
			/div> <
			/div> <
			/div>
		);
	}
}

function mapStateToProps(rootReducer) {
	return {
		todos: rootReducer.todoReducer.showTodos
	}
}

function mapActionToProps(dispatch) {
	return {
		addTodo: (action) => {
			dispatch(action)
		},
		changeTodoStatus: (action) => {
			dispatch(action)
		},
		all: (action) => {
			dispatch(action)
		},
		showPendding: (action) => {
			dispatch(action)
		},
		showFinished: (action) => {
			dispatch(action)
		},
		deleteTodo: (action) => {
			dispatch(action)
		}
	}
}
export default connect(mapStateToProps, mapActionToProps)(App);
